<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title>食品数据融合与挖掘平台</title>
		<link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
		<link href="/css/common.css" type="text/css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="/css/nav.css">
		<link rel="stylesheet" type="text/css" href="/css/iconfont.css">
		<script src="/js/jquery-3.2.1.min.js"></script>
		<script src="/layui/layui.js"></script>
		<script src="/js/alert.js"></script>
		<script src="/js/echarts.min.js"></script>
	</head>
	<body>
		<!-- 头部导航 -->
		<div class="jzy_w_max jzy_h_50 br_12">
			<!--菜单1-->
			<div class="jzy_h_50 br_12 br_11_hove lt top-txt">
				<a class="cr_h_0 fs_14" href="">食品数据融合与挖掘平台</a>
			</div>
			<!--头像-->
			<div class="jzy_w_50 jzy_h_50 br_12 br_11_hove rt top-txt logo">
				<img class="jzy_boy_18" src="/images/touxiang.jpg" width="36" height="36">
				<!-- 头像下拉菜单 -->
				<div class="jzy_w_270 jzy_h_408 br_h_0 top_nav">
					<!--头像跟用户名-->
					<div class="jzy_w_max jzy_h_50 lt" style="margin-top: 15px"><img class="jzy_boy_18" src="/images/touxiang.jpg" width="36" height="36"></div>
					<div class="jzy_w_max jzy_h_30 lt" style="line-height: 30px; border-bottom: 1px solid #e2e2e2">17812100232</div>
					<!--用户公共操作权限-->
					<div class="jzy_w_250 jzy_h_250 lt" style="padding: 10px">
						<div class="jzy_w_80 jzy_h_80 lt br_h_2_hove">
							<a>
								<p class="jzy_h_30"><img src="/images/icon/jbzl.png"></p>基本资料
							</a>
						</div>
						<div class="jzy_w_80 jzy_h_80 lt br_h_2_hove">
							<a>
								<p class="jzy_h_30"><img src="/images/icon/smrz.png"></p>基本资料
							</a>
						</div>
					</div>
					<!--退出登录-->
					<div class="jzy_w_max jzy_h_42 lt br_h_9" style="background: #f5f5f6; line-height: 45px"><a href="/index">退出平台</a></div>
				</div>
			</div>
			<!--菜单3-->
			<div class="jzy_w_90 jzy_h_50 br_12 br_11_hove rt top-txt">
				<a class="cr_h_0 fs_14">权限设置</a>
				<!-- 头像下拉菜单 -->
				<div class="jzy_w_90 br_h_0 top_nav nav2">
					<p class="p"><a href="">新建权限</a></p>
					<p class="p"><a href="">角色列表</a></p>
				</div>
			</div>
		</div>
		<!--左侧主导航-->
		<div class="jzy_w_180 lt main_height main_left nav" style="background: #333744">
			<div class="nav-top">
				<div id="mini" style="background: #4a5064; text-align: center"><img src="/images/icon/suofang.png" width="20"></div>
			</div>
			<ul>
				<li class="nav-item" id="home">
					<a href="/page/home"><i class="my-icon nav-icon"></i><span>首页</span></a>
				</li>
				<li class="nav-item nav-show">
					<a href="javascript:;"><i class="my-icon nav-icon"></i><span>分类</span><i class="my-icon nav-more"></i></a>
					<ul>
						<li><a href="/page/LR"><span>LR</span></a></li>
						<li><a href="/page/model"><span>SVM</span></a></li>
						<li class="nav-show"><a href="/page/modelList"><span>决策树</span></a></li>
						<li><a href="/page/job"><span>贝叶斯</span></a></li>
					</ul>
				</li>
				<li class="nav-item">
					<a href="javascript:;"><i class="my-icon nav-icon"></i><span>回归</span><i class="my-icon nav-more"></i></a>
					<ul>
						<li><a href="/page/MCAlgorithm"><span>最小二乘回归</span></a></li>
						<li><a href="/page/MLJoblist"><span>贝叶斯回归</span></a></li>
					</ul>
				</li>
				<li class="nav-item">
					<a href="javascript:;"><i class="my-icon nav-icon"></i><span>聚类</span><i class="my-icon nav-more"></i></a>
					<ul>
						<li><a href=""><span>KNN</span></a></li>
						<li><a href=""><span>K-means</span></a></li>
						<li><a href=""><span>层次聚类</span></a></li>
					</ul>
				</li>
				<li class="nav-item">
					<a href="javascript:;"><i class="my-icon nav-icon"></i><span>降维</span><i class="my-icon nav-more"></i></a>
					<ul>
						<li><a href="/page/PCA"><span>PCA</span></a></li>
						<li><a href=""><span>kernal-PCA</span></a></li>
						<li><a href=""><span>FactorAnalysis</span></a></li>
					</ul>
				</li>
				<li class="nav-item">
					<a href="javascript:;"><i class="my-icon nav-icon"></i><span>集成</span><i class="my-icon nav-more"></i></a>
					<ul>
						<li><a href=""><span>Bagging</span></a></li>
						<li><a href=""><span>随机森林</span></a></li>
						<li><a href=""><span>GBDT</span></a></li>
					</ul>
				</li>
			</ul>
		</div>
		<!--主内容框架-->
		<div class="main_height main_index lt" style="background: #f2f4f8;">
			<div class="layui-btn-group demoTable jzy_w_max br_h_0 tabTop">
                <button class="layui-btn layui-btn-sm layui-btn-normal" id="createModel">新建模型</button>
				<button class="layui-btn layui-btn-sm layui-btn-normal clickTab">打开搜索面板</button>
			</div>
			<div style="width:100%;padding-left: 1px;">
				<table id="modelListTable" lay-filter="modelListTable"></table>
			</div>
		</div>
		<!--多功能面板-->
		<div id="divTab" class="divTab">
			<!--固定头部-->
			<div class="jzy_tab_top">
				<img src="/images/icon/gongneng.png" class="lt">
				<div class="txt lt">搜索面板</div>
				<div class="on rt" id="onTab">×</div>
			</div>
			<div class="jzy_tab_main">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
					<legend>搜索条件</legend>
				</fieldset>
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-form-item">
							<label class="layui-form-label">模型名称</label>
							<div class="layui-input-block">
								<input id="searchName" type="text" name="name" style="width:190px;" placeholder="请输入模型名称" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<input id="searchTable" class="layui-btn layui-btn-sm layui-btn-normal"  readonly="true" data-type="reload" value="搜索">
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
		<script type="text/javascript" src="/js/nav.js"></script>
		<script src="/js/jump.js"></script>
		<!-- 这里的 checked 的状态只是演示 -->
		<script type="text/html" id="switchTpl">
			<a class="layui-btn layui-btn-xs" style="padding:0 15px !important;" lay-event="detail">点击行查看模型图</a>
		</script>
		<!-- 这里的 操作 的html插入演示 -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-danger layui-btn-xs" style="padding:0 15px !important;" lay-event="del1">删除</a>
			<a class="layui-btn layui-btn-xs" style="padding:0 15px !important;" lay-event="exe" >执行</a>
		</script>
		<script type="text/javascript" th:inline="javascript">
		    var modelTableList=null;
			/*<![CDATA[*/
			var modelHref= /*[[@{/page/model?}]]*/ null;
			/*]]>*/
			/*<![CDATA[*/
			var jobHref= /*[[@{/page/job?}]]*/ null;
			/*]]>*/

		    $("#createModel").on('click',function(){
                 layer.prompt({title: '请输入模型名称'}, function(val, index){
                      var dataString={"name":val,"description":null};
                      $.ajax({
                            type: "POST",
                            dataType: "json",
                            async:false,
                            url: "/modelAdd.do",
                            data:dataString,
                            success: function (response) {
                                if(response.status==0){
                                    modelTableList.reload({
                                    });
									var uuid=response.msg.split(":")[1];
									uuid=uuid.replace(/\s*/g,"");//去掉空格
                                    location.href = modelHref+"modelname="+val+"&uuid="+uuid;
                                }
                            },
                            error : function(response) {
                                console.log('error');
                            }
                      });
                      layer.close(index);
                      layer.msg('您输入的模型名称是：'+ val);
                  });
            });
			layui.use(['form', 'table', 'laydate', 'tree'], function() {
				var table = layui.table,
					form = layui.form,
					laydate = layui.laydate;
				laydate.render({
					elem: '#date',
					type: 'datetime',
					value: new Date()
				});
				// 开启一个数据表格
			      modelTableList=table.render({
					elem: '#modelListTable',
					method:'post',
					url: '/getModelListAll.do' ,//数据接口
					page: true,//开启分页
					limit: 10,//默认分页条数
					height: 'full', //高度最大化
					  id:'modelTable',
					cols: [
							[ //表头
								{
									type: 'checkbox'
								} ,// 开启多选框
								{
									field: 'id',
									title:'ID',
									hide:'true',
									align: 'center',

								} // 开启多选框
								, {
									field: 'name',
									title: '模型名称',
									width: '25%',
									align: 'center',
									edit: 'false'
								}, {
									field: 'timeCreate',
									title: '创建时间',
									width: '15%',
									align: 'center',
									sort: true,
								    templet: function(d){return layui.util.toDateString(d.timeCreate, "yyyy-MM-dd HH:mm:ss");},

								}, {
									field: 'timeChange',
									title: '上次修改时间',
									width: '15%',
									align: 'center',
									sort: true,
									templet: function(d){return layui.util.toDateString(d.timeChange, "yyyy-MM-dd HH:mm:ss");},
								}, {
									field: 'modelString',
									title: '模型图',
									width: '20%',
									align: 'center',
									templet: '#switchTpl',
									unresize: true,
									event:'showModelString'
								}
								, {
									field: 'operation',
									title: '操作',
									width: '21.5%',
									align: 'center',
									toolbar: '#barDemo'
								}
							]
						],
						// 默认数据
					parseData: function(res){ //res 即为原始返回的数据
						  return {
							  "code": res.status, //解析接口状态
							  "count":res.count,
							  "data": res.data, //解析数据列表
						  };
					  }
				});
				var $ = layui.$, active = {
					reload: function(){
						var searchName=$("#searchName").val();
						//执行重载
						table.reload('modelTable', {
							method:'post',
							url: '/getModelByName.do' ,//数据接口
							page: {curr: 1},
							where: {name: searchName},
							parseData: function(res){ //res 即为原始返回的数据
								var searchresult=[];
								searchresult.push(res.data);
								return {
									"code": res.status, //解析接口状态
									"data": searchresult, //解析数据列表
									"count":1,
								};
							},
						});
					}
				};
				$("#searchTable").on('click',function(){
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});
				// 监听数据表格中的单元格编辑
				table.on('tool(modelListTable)', function(obj){
					var data = obj.data;
					console.log(data)
					if(obj.event == 'del1'){
					 	layer.confirm('确认删除吗？', function(index){
						$.ajax({
							type: "POST",
							dataType: "json",
							url: "/modelRemoveByName.do",
							data: {
								"name":data.name
							},
							success: function (response) {
								 if(response.status==0){
									table.reload('modelTable',{});
								 }else{
									 layer.alert("删除失败！请先删除运用该模型的任务");
								 }
							},
							error : function() {
								layer.alert("提交失败");
							}
						});
						layer.close(index);
					  });
					} else if(obj.event == 'edit'){
					    location.href = modelHref;
					}else if(obj.event === 'showModelString'){
						console.log(data.modelString);
						var modelString=JSON.stringify(data.modelString);
						console.log(modelString);
					  	location.href = modelHref+"modelString="+ null +"&modelname="+data.name ;
					}else if(obj.event === 'exe'){
						location.href=jobHref+"modelname="+data.name+"&modelId="+data.uuid;
					}
				 });
			});
		</script>
	</body>
</html>
